<template>
  <view class="chatShowComBox" >
    <!-- 左侧 -->
    <view class="left" v-if="props.direction === 'left'">
      <!-- 用户头像 -->
      <image :src="props.avavtar" mode="aspectFill" class="avatar" />
      <!-- 消息主体 -->
      <view class="content">
        <!-- 文本内容 -->
        <view v-if="props.typed === 'str'" class="chatContent">{{
          props.content
        }}</view>
        <!-- 图片展示-->
        <image
          v-else
          :src="props.content"
          mode="widthFix"
          class="chatImage"
          @click="previewImage(props.content)"
        />
      </view>
    </view>

    <!-- 右侧 -->
    <view v-else class="left right">
      <!-- 消息主体 -->
      <view class="content contentRight">
        <!-- 文本内容 -->
        <view
          v-if="props.typed === 'str'"
          class="chatContent chatContentRight"
          >{{ props.content }}</view
        >
        <!-- 图片内容 -->
        <image
          v-else
          :src="props.content"
          mode="widthFix"
          class="chatImage chatImageRight"
          @click="previewImage(props.content)"
        />
      </view>
      <!-- 用户头像 -->
      <image :src="props.avavtar" mode="aspectFill" class="avatar" />
    </view>
  </view>
</template>

<!-- 聊天信息展示组件 -->
<script lang="ts" setup>
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
} from 'vue'

//父组件传递数据，是否关注、
const props = defineProps({
  typed: {
    type: String,
    default: '',
  },
  direction: {
    type: String,
    default: 'right',
  },
  content: {
    type: String,
    default: '',
  },
  avavtar: {
    type: String,
    default: '',
  },
})

//图片预览
const previewImage = (str: string) => {
  uni.previewImage({
    current: 0, // 当前显示图片的索引，默认为0
    urls: [str], // 需要预览的所有图片链接列表
  })
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})
</script>

<style scoped lang="scss">
.chatShowComBox {
  width: 100%;

  .left {
    display: flex;
    margin: 30rpx 20rpx;

    width:calc(100% - 40rpx);

    .avatar {
      width: 90rpx;
      height: 90rpx;
      border-radius: 10rpx;
    }

    .content {
      width: calc(100% - 120rpx);

      .chatContent {
        position: relative;
        max-width: 85%;
        width: fit-content;
        border-radius: 10rpx;
        background-color: rgb(81, 165, 238);
        padding: 25rpx 20rpx;
        font-size: 28rpx;
        margin-left: 20rpx;
        letter-spacing: 2rpx;
        word-break: break-all;
        color: rgb(255, 255, 255);
        filter: drop-shadow(2rpx 0 2rpx rgb(197, 197, 197));
        box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
          rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;

        &::after {
          position: absolute;
          content: '';
          top: 20rpx;
          left: 0;
          width: 0;
          height: 0;
          transform: translateX(-100%);
          border: 15rpx solid transparent;
          border-right: 15rpx solid rgb(81, 165, 238);
          z-index: 9;
          border-radius: 4rpx;
        }
      }

      .chatImage {
        max-width: 40%;
        max-height: 200rpx;
        border-radius: 10rpx;
        margin-left: 20rpx;
      }
    }
  }

  .right {
    justify-content:flex-end;


    .contentRight {
      text-align: right;

      .chatImageRight {
        max-width: 40%;
        max-height: 200rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .chatContentRight {
        margin-left: auto;
        text-align: left;
        background-color: rgb(255, 255, 255);
        color: rgb(5, 5, 5);
        margin-right: 20rpx;

        &::after {
          left: auto;
          right: 0;
          transform: translateX(100%);
          border-right: 15rpx solid transparent;
          border-left: 15rpx solid rgb(255, 255, 255);
        }
      }
    }
  }
}
</style>
